/**
 * 泛娱区块链 - BannerComponent
 * http://menger.me
 * @大梦
 */

import React, {Component} from 'react'
import {ImageBackground, StyleSheet, TouchableOpacity, View,} from 'react-native'
import {Carousel} from "teaset";
import SpinnerLoading from "../common/SpinnerLoading";
import ServicesApi from "../../config/ServicesApi";

export default class BannerComponent extends Component {

    constructor(props) {
        super(props);
        this.state = {
            swiperShow: false,
            bannerData: this.props.bannerData,
        };
    }

    static defaultProps = {
        bannerData: [],
    };

    componentDidMount() {
        this.timer = setTimeout(() => {
            this.setState({
                swiperShow: true
            });
        }, 0)
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            bannerData: nextProps.bannerData
        });
    }

    componentWillUnmount() {
        this.timer && clearTimeout(this.timer);
    }

    renderBanner = (row) => {
        if (this.state.swiperShow) {
            if (row.length <= 0) {
                return (
                    <ImageBackground
                        style={styles.headBackImage}
                        resizeMode={'cover'}
                        source={Images.img_banner}
                    />
                );
            }
            let banners = row.map((item, index) => {
                let imgUrl = {uri: ServicesApi.QI_NIU_LINK + item.carousel_img};
                return (
                    <TouchableOpacity
                        style={styles.bannerViewWrap}
                        key={"banner_" + index}
                        activeOpacity={1}
                        onPress={() => {
                            if (item.carousel_type === 'advertising') {
                                item.carousel_url && RouterHelper.navigate(item.carousel_note, 'WebPage', {uri: item.carousel_url});
                            } else {
                                item.carousel_key && RouterHelper.navigate(item.carousel_note, 'ArticleDetails', {information_id: item.carousel_key});
                            }
                        }}
                    >
                        <ImageBackground
                            style={styles.headBackImage}
                            resizeMode={'cover'}
                            source={item.carousel_img ? imgUrl : Images.img_banner}
                        />
                    </TouchableOpacity>
                )
            });
            // 这里不能输出信息，否则会陷入死循环
            return banners;
        }
    };

    render() {
        let {style} = this.props;
        const {bannerData} = this.state;
        return (
            <View style={[styles.container, style]}>
                <Carousel
                    style={styles.headBackCarousel}
                    control={
                        <Carousel.Control
                            style={styles.carouselControlView}
                            dot={<View style={styles.carouselControl}/>}
                            activeDot={<View style={[styles.carouselControl, styles.carouselControlCur]}/>}
                        />
                    }
                >{this.renderBanner(bannerData)}</Carousel>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        marginTop: __IOS__ ? 0 : -20,
        // backgroundColor: '#f1f2f3',
        height: SCREEN_WIDTH * 0.45,
    },
    bannerViewWrap: {},

    carouselControlView: {
        marginBottom: 10,
        alignItems: 'flex-end',
    },
    carouselControl: {
        marginRight: 10,
        width: ScaleSize(25),
        height: ScaleSize(10),
        borderRadius: ScaleSize(8),
        backgroundColor: "rgba(255, 255, 255, 0.5)",
    },
    carouselControlCur: {
        backgroundColor: '#fff',
    },
    headBackCarousel: {
        overflow: 'hidden',
        width: SCREEN_WIDTH,
        height: SCREEN_WIDTH * 0.45,
    },
    headBackImage: {
        width: SCREEN_WIDTH,
        height: SCREEN_WIDTH * 0.45,
    },
});